<template>
   <div class="login">
    <!-- el-form表示表单组件， el-form-item表示表单组件中的每一项内容 -->
    <!-- model表示表单数据对象 -->
    <!-- Form 组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将 Form-Item的prop属性设置为需校验的字段名即可。 -->
    <!-- 1.1 rules属性用于表单校验，校验规则需要在data中定义 :rules="myrules"  myrules是我们自己定义的变量 应该在下面的data有所定义-->
    <!-- 2.1 给el-form定义一个ref属性，用于js表单校验 ref="loginRef" 定义的名字可以随意取 -->
    <el-form :model="loginForm" :rules="myrules" ref="loginRef" status-icon class="container">
      <el-form-item>
        <div class="avatar">
          <img src="../assets/avatar.jpg" alt="">
        </div>
      </el-form-item>
      <!-- 1.2 注意prop字段必须和loginForm对象中的字段名一致 -->
      <el-form-item prop="username">
        <!-- prefix-icon 属性用于给input框添加前缀图标 -->
        <!-- 登录 -->
        <el-input v-model="loginForm.username" autocomplete="off" prefix-icon="myicon myicon-user"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <!--  给封装好的input组件绑定keydown事件的时候，必须加上.native修饰符 不加的话没有效果 因为它只会对原生的input生效 -->
       <el-input type="password" v-model="loginForm.password" autocomplete="off" prefix-icon="myicon myicon-key" @keydown.enter.native="handleLogin('loginRef')"></el-input>
      </el-form-item>
      <el-form-item>
          <!-- 登录前应该绑定一个事件 添加@click="handleLogin 因为传递的'loginRef'是字符串 所以ref这样写 -->
        <el-button type="primary" class="login-btn" @click="handleLogin('loginRef')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import axios from 'axios'
import { login } from '@/api'
export default {
  data () {
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 校验
      // 1.1 校验规则定义
      myrules: {
        //   required: true 表示必须的 message: '请输入用户名'表示没有输入时的提示信息 trigger: 'blur'表示触发条件 blur失焦的时候触发
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleLogin (refName) {
      // 2.2 通过ref获取到的dom的validate方法实现js校验。这个方法是内部封装好的，直接调用即可。该方法中传递一个函数，该函数有一个布尔值作为参数，为true表示校验通过，为false表示失败,this.$refs获取到dom引用，以前是this.$refs.语法，但现在传的是字符串，不可以点,validate方法里传一个函数，里面的参数自定义
      this.$refs[refName].validate(isPass => {
        if (isPass) {
          // console.log('登录')
          // axios.post('http://localhost:8888/api/private/v1/login', { username: this.loginForm.username, password: this.loginForm.password })
          //   .then(res => {
          //     console.log(res)
          //     // 根据状态码判断是否登录成功. 200为成功，400用户不存在
          //     if (res.data.meta.status === 200) {
          //       this.$router.push({ name: 'home' })
          //     } else {
          //       // this.$message.error是element官网组件-通知那里找的
          //       this.$message.error(res.data.meta.msg)
          //     }
          //   })
          login({ username: this.loginForm.username, password: this.loginForm.password })
            .then(res => {
              console.log(res)
              if (res.meta.status === 200) {
                // 跳转到首页
                this.$router.push({ name: 'home' })
                // 保存token到本地 这里不需要再多写一个data了
                localStorage.setItem('mytoken', res.data.token)
                // 保存username到本地  username来自登录时的请求 login-data里的username
                localStorage.setItem('username', res.data.username)
                // 跳转到首页
                this.$router.push({ name: 'home' })
              } else {
                // 这里不需要再多写一个data了 因为在api写了
                this.$message.error(res.meta.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          console.log('校验失败')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// scoped属性的作用是将样式变为局部作用域的样式，实现方式是在css选择器后面加上一段随机生成的字符串，防止相同的类名间样式篡改
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2f4050;

  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: white;
    .avatar {
      position: relative;
      left: 50%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>
